<template>
  <div>
    <a-modal :visible="visible" :footer="false" @before-open="open" @ok.stop="visible = false" @cancel="cancel" :align-center="false" title-align="start" width="850px" :mask-closable="false">
      <template #title> {{ title }} </template>
      <div>
        <a-row>
          <a-col :span="8">
            <span>{{ type == 'in' ? '其他入库单号：' : '其他出库单号：' }}</span>
            <span>{{ detailInfo.billNo }}</span>
          </a-col>
          <a-col :span="7">
            <span>库仓：</span>
            <span>{{ detailInfo.warehouseName }}</span>
          </a-col>
          <a-col :span="9">
            <span>店铺：</span>
            <span>{{ detailInfo.shopName }}</span>
          </a-col>
        </a-row>
        <a-row style="margin: 10px 0">
          <a-col :span="8">
            <span>创建人：</span>
            <span v-if="detailInfo.createUname">{{ detailInfo.createUname }}({{ $setTime(detailInfo.gmtCreate) }})</span>
          </a-col>
          <a-col :span="8">
            <span>审核人：</span>
            <span v-if="detailInfo.auditorName">{{ detailInfo.auditorName }}({{ $setTime(detailInfo.gmtAudit) }})</span>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <span>备注：</span>
            <span>{{ detailInfo.remark }}</span>
          </a-col>
        </a-row>
      </div>
      <div style="margin-top: 10px">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" :title="type == 'in' ? '入库产品' : '出库产品'">
            <div style="margin: 10px 0" v-if="type == 'in'">
              <span style="margin-left: 10px">SKU种类：</span><span>{{ skuKind }}</span> <span style="margin-left: 10px">入库数量：</span><span>{{ inHouseNum }}</span> <span style="margin-left: 10px">总金额：</span><span>￥{{ allPrice }}</span>
            </div>
            <div style="margin: 10px 0" v-else>
              <span style="margin-left: 10px">已选SKU：</span><span>{{ skuKind }}</span
              ><span style="margin-left: 10px">出库数量：</span><span>{{ outNum }}</span>
            </div>

            <a-table v-if="type == 'in'" size="mini" class="table-singe-line" :pagination="false" :scroll="{ y: '400px' }" :data="detailInfo.otherInItems">
              <template #columns>
                <a-table-column title="货主" width="70" #cell="{ record }">{{ record.ownerName }} </a-table-column>
                <a-table-column title="图片" width="80">
                  <template #cell="{ record }">
                    <ImgPopover :src="record.productImg">
                      <template #con>
                        <a-image height="40px" width="40px" :src="record.productImg" />
                      </template>
                    </ImgPopover>
                    <!-- <a-image width="60px" height="60px" :src="record.productImg"></a-image> -->
                  </template>
                </a-table-column>
                <a-table-column title="产品名称/SKU" width="160">
                  <template #cell="{ record }">
                    <div>{{ record.productName }}</div>
                    <div>{{ record.sku }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="MSKU" width="160">
                  <template #cell="{ record }">
                    <div>{{ record.msku }}</div>
                    <!-- <div>{{ record.fnsku }}</div> -->
                  </template>
                </a-table-column>
                <a-table-column title="SPU/类目" width="160">
                  <template #cell="{ record }">
                    <div>{{ record.spu }}</div>
                    <div>{{ record.cateName }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="品牌" width="80">
                  <template #cell="{ record }">
                    <div>{{ record.brandName }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="产品类型" width="80">
                  <template #cell="{ record }">
                    <div>{{ record.productType }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="数量" width="80">
                  <template #cell="{ record }">
                    <div>{{ record.amt }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="入库属性" width="80">
                  <template #cell="{ record }">
                    <div>{{ record.attribute == 'good' ? '良品' : '次品' }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="单位成本" width="80">
                  <template #cell="{ record }">
                    <div>{{ record.price }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="货值" width="80">
                  <template #cell="{ record }">
                    <div>{{ record.amt * record.price }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="上架货位" width="80">
                  <template #cell="{ record }">
                    <div>{{ record.locationCode }}</div>
                  </template>
                </a-table-column>
              </template>
            </a-table>
            <a-table v-else size="mini" class="table-singe-line" :pagination="false" :scroll="{ y: '400px' }" :data="detailInfo.otherOutItems">
              <template #columns>
                <a-table-column title="货主" width="70" #cell="{ record }">{{ record.ownerName }} </a-table-column>
                <a-table-column title="图片" width="80">
                  <template #cell="{ record }">
                    <ImgPopover :src="record.productImg">
                      <template #con>
                        <a-image height="40px" width="40px" :src="record.productImg" />
                      </template>
                    </ImgPopover>
                    <!-- <a-image width="60px" height="60px" :src="record.productImg"></a-image> -->
                  </template>
                </a-table-column>
                <a-table-column title="产品名称/SKU" width="160">
                  <template #cell="{ record }">
                    <div>{{ record.productName }}</div>
                    <div>{{ record.sku }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="MSKU/FNSKU" width="160">
                  <template #cell="{ record }">
                    <div>{{ record.msku }}</div>
                    <div>{{ record.fnsku }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="货位" width="100">
                  <template #cell="{ record }">
                    <div>{{ record.spu }}</div>
                    <div>{{ record.cateName }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="库存属性" width="80">
                  <template #cell="{ record }">
                    <div>{{ record.attribute == 'good' ? '良品' : '次品' }}</div>
                  </template>
                </a-table-column>

                <a-table-column title="可出库数量" width="80">
                  <template #cell="{ record }">
                    <div>{{ record.amtAvailable ? record.amtAvailable : 0 }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="出库数量" width="80">
                  <template #cell="{ record }">
                    <div>{{ record.amt }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="单位成本" width="80">
                  <template #cell="{ record }">
                    <div>{{ record.price }}</div>
                  </template>
                </a-table-column>

                <a-table-column title="货值" width="80">
                  <template #cell="{ record }">
                    <div>{{ record.amt * record.price }}</div>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="2" title="单据日志">
            <a-table size="mini" style="margin-top: 10px" class="table-singe-line" :pagination="false" :scroll="{ y: '400px' }" :data="logList">
              <template #columns>
                <a-table-column title="序号" width="80">
                  <template #cell="{ record, rowIndex }">
                    <div>{{ rowIndex + 1 }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="时间" width="80">
                  <template #cell="{ record, rowIndex }">
                    <div>{{ $setTime(record.gmtCreate) }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="操作人" width="80">
                  <template #cell="{ record, rowIndex }">
                    <div>{{ record.createUname }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="事件" width="80">
                  <template #cell="{ record, rowIndex }">
                    <div>{{ filterType(record.eventType) }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="描述" width="200">
                  <template #cell="{ record, rowIndex }">
                    <div>{{ record.eventMsg }}</div>
                  </template>
                </a-table-column>
              </template>
            </a-table>
            <div class="pagination-footer">
              <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { getOtherInInfo, findOtherInLogPage, getOtherOutInfo, findOtherOutLogPage } from '@/api/warehouse'
  import { Message } from '@arco-design/web-vue'
  export default defineComponent({
    props: ['id', 'type'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const formRef = ref()
      const data: any = reactive({
        detailInfo: {
          otherInItems: [],
          otherOutItems: [],
        },
        pageNation: { total: 0, pageSize: 20, pageNum: 1 },
        logList: [],
      })

      const title = computed(() => {
        return props.type == 'in' ? '其他入库单详情' : '其他出库单详情'
      })

      const open = () => {
        console.log(props)

        getDetailInfo()
        getLog()
      }
      const getDetailInfo = async () => {
        let res = {}
        if (props.type == 'in') {
          res = await getOtherInInfo({ id: props.id })
        } else {
          res = await getOtherOutInfo({ id: props.id })
        }

        data.detailInfo = res?.data || {}
      }

      const changePage = (val: number) => {
        data.pageNation.pageNum = val
        getLog()
      }

      const sizeChange = (val: number) => {
        data.pageNation.pageNum = 1
        data.pageNation.pageSize = val
        getLog()
      }

      const getLog = async () => {
        let params = {
          pageNum: data.pageNation.pageNum,
          pageSize: data.pageNation.pageSize,
        }

        let res: any = {}

        if (props.type == 'in') {
          params.otherInId = props.id
          res = await findOtherInLogPage(params)
        } else {
          params.otherOutId = props.id
          res = await findOtherOutLogPage(params)
        }

        data.pageNation.total = res?.data?.total
        data.logList = res?.data?.records
      }

      const cancel = () => {
        data.pageNation = { total: 0, pageSize: 20, pageNum: 1 }
        data.logList = []
        visible.value = false
      }

      const filterType = (val: number) => {
        let text = ''
        switch (val) {
          case 1:
            text = '新建'
            break
          case 2:
            text = '更新'
            break
          case 3:
            text = '删除'
            break
          case 4:
            text = '提交'
            break
          case 5:
            text = '审核'
            break
          case 6:
            text = '驳回'
            break
        }
        return text
      }

      const skuKind = computed(() => {
        let skuArr: any = []
        if (props.type == 'in') {
          data.detailInfo.otherInItems.forEach((e: any) => {
            let index = skuArr.findIndex((el: any) => el == e.sku || e.msku)
            if (index == -1) {
              skuArr.push(e?.sku || e?.msku)
            }
          })
        } else {
          data.detailInfo?.otherOutItems.forEach((e: any) => {
            let index = skuArr.findIndex((el: any) => el == e.sku || e.msku)
            if (index == -1) {
              skuArr.push(e?.sku || e?.msku)
            }
          })
        }
        return skuArr.length
      })
      const allPrice = computed(() => {
        let allPrice = 0
        data.detailInfo.otherInItems.forEach((e: any) => {
          allPrice += e.price * e.amt
        })
        return allPrice
      })
      const inHouseNum = computed(() => {
        let num = 0
        data.detailInfo.otherInItems.forEach((e: any) => {
          num += e.amt
        })
        return num
      })

      const outNum = computed(() => {
        let num = 0
        data.detailInfo?.otherOutItems.forEach((e: any) => {
          num += e?.num || 0
        })
        return num
      })

      return {
        ...(toRefs(data) as any),
        visible,
        title,
        open,
        skuKind,
        allPrice,
        inHouseNum,
        changePage,
        sizeChange,
        filterType,
        outNum,
        cancel,
      }
    },
  })
</script>

<style lang="less" scoped></style>
